<template>
  <div>
    <!-- 头部说明 -->
    <common-head title="购物车"></common-head>

    <!-- 商品列表 -->
    <div class="cart-wrap">
      <!-- 购物车商品为空的时候，提示用户去购物 -->
      <div class="login-hint" v-if="!checkLogin()">
        <p>登录后可以同步电脑和手机购物车中的商品</p>
        <van-button type="danger" size="mini" @click="$router.push('/login')">登录</van-button>
      </div>
      <div v-if="!carts.items.length">
        <van-empty description="购物车是空空的呢">
          <van-button round type="danger" class="bottom-button" @click="$router.push('/home')">
            逛一逛
          </van-button>
        </van-empty>
      </div>

      <van-swipe-cell v-for="(item, index) in carts.items" :key="item.id">
        <div class="item">
          <!-- 复选框 -->
          <van-checkbox v-model="item.isChecked" @click="singleChange"></van-checkbox>
          <!-- 商品卡片 -->
          <van-card :num="item.num" :price="(item.minPrice*item.num).toFixed(2)" :title="item.name" class="goods-card"
            :thumb="item.pic">

            <!-- 自增自减 -->
            <template #tags>
              <van-stepper v-model="item.num" @change="numChange"></van-stepper>
            </template>

          </van-card>
        </div>

        <template #right>
          <van-button square text="删除" @click="del(index)" type="danger" class="delete-button" />
        </template>
      </van-swipe-cell>

    </div>

    <!-- 商品结算栏 -->
    <van-submit-bar :price="carts.total*100" button-text="提交订单" @submit="onSubmit">
      <van-checkbox v-model="carts.isAllChecked" @click="allCheckedChange">全选</van-checkbox>
    </van-submit-bar>

    <!-- tabbar -->
    <my-tabbar></my-tabbar>
  </div>
</template>

<script>
import MyTabbar from '@components/MyTabbar'
import CommonHead from '@components/CommonHead'
import { mapState, mapActions, mapMutations } from 'vuex'
import { Dialog } from 'vant'
import { checkLogin } from '@utils'
import { Toast } from 'vant'

export default {
  components: {
    MyTabbar,
    CommonHead
  },
  mounted () {
    this.calc_total()
  },
  methods: {
    // 修改 商品 数量 触发
    numChange () {
      this.setCarts(this.carts)
      this.calc_total()
    },
    // 删除商品
    del (i) {
      Dialog.confirm({
        title: '删除商品',
        message: '确认删除吗',
      }).then(() => {
        // (1) 删除商品
        this.delItem(i)
        // (2) 重新计算总价
        this.calc_total()
      })
    },
    // 单选
    singleChange () {
      // (1) 购物车页面的 单选框的选择状态变化，同步到 vuex 里面的数据里面
      this.setCarts(this.carts)
      // (2) 重新计算总价
      this.calc_total()
      // (3) 判断全选
      const items = this.carts.items
      const allChecked = items.every(item => item.isChecked)
      this.setAllChecked(allChecked)
    },
    // 全选  这里全选不再使用 change 事件，是因为 两个 change 事件容易引起 bug
    allCheckedChange () {
      this.cancelAllChecked(this.carts.isAllChecked)
      // 计算总价格
      this.calc_total()
    },
    // 提交 订单
    onSubmit () {
      // 先判断有没有登录
      if (this.checkLogin()) {
        // 过滤没有选中的商品
        const checkedItems = this.carts.items.filter(el => el.isChecked)
        if (checkedItems.length === 0) {
          Toast('至少要选择一个商品哦~~')
        } else {
            /* 
          1. 去联系人列表中查找是否有联系人
          2. 若联系人列表为空，则联系人为空
          3. 找默认联系人
          4. 若没有默认联系人，则选择列表中的第一个
        */
        // 生成订单数据
        let contact = {}
        if (this.contacts.length > 0) {
          // 说明联系人列表不为空
          let defaultContact = this.contacts.find(el => el.isDefault)
          if (defaultContact) {
            // 有默认联系人
            contact = defaultContact
          } else {
            // 没有默认联系人，则就选择列表中的第一个
            contact = this.contacts[0]
          }

        }
        const newOrder = {
          code: Date.now(), // 订单编号
          items: checkedItems, // 订单商品
          contact,
          price: this.carts.total
        }
        this.setOrder(newOrder)
        // 登录了，前往 订单页
        this.$router.push('/order')
        // console.log(this.carts.items);
        }
      
      } else {
        // 未登录 去登录
        this.$router.push({
          name: 'login',
          params: {
            from: '/cart'
          }
        })
      }
    },
    // 判断是否有登陆，友情提示
    checkLogin,
    ...mapActions('cart', ['calc_total']),
    ...mapMutations('cart', ['setCarts', 'delItem', 'setAllChecked', 'cancelAllChecked']),
    ...mapMutations('order', ['setOrder'])

  },
  computed: {
    ...mapState({
      carts: (state) => state.cart.carts,  
      contacts: (state) => state.address.contacts
    })

  },

}
</script>

<style lang="scss" scoped>
.cart-wrap {
  padding-top: 46px;
  padding-bottom: 100px;
}

.van-submit-bar {
  bottom: 50px;
}

.item {
  background-color: #fafafa;
  display: flex;
  .van-checkbox {
    margin: 0 5px;
  }
  .goods-card {
    flex: 1;
    .van-card__title {
      margin-bottom: 10px;
    }
  }
}
.delete-button {
  height: 100%;
}
.van-card__price {
  color: red;
}
.bottom-button {
  width: 160px;
  height: 40px;
}
.login-hint {
  width: 100%;
  height: 40px;
  background-color: bisque;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 25px;
}
/deep/.van-button--mini {
  padding-left: 12px;
  padding-right: 12px;
  border-radius: 5px;
}
</style>
